<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            font-family: 'Microsoft YaHei'
        }

        /* span :hover{
    cursor: pointer;
} */

        .main-page-navigation span {
            font-size: 16px;
            font-family: "Microsoft YaHei";
            color: gray;
        }

        .main-page-navigation-content {
            width: 100%;

            height: 50px;

            background: #F0F0F0;
        }

        /**首页头部菜单主体div容器**/
        .main-page-navigation {

            width: 80%;

            height: 50px;

            margin: auto;
        }


        /***头部菜单左边div容器 主要方核心功能菜单**/
        .main-menu-left {

            width: 60%;

            height: 100%;

            background: #F0F0F0;

            float: left;
        }

        /**头部右边菜单div容器，主要放查询框，以及用户信息**/
        .main-menu-right {

            width: 40%;

            height: 100%;

            float: left;
        }

        /**logo图标div 属性**/
        .main-menu-logo {
            width: 15%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }

        /**首页div 属性**/
        .main-menu-index {

            width: 7%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }


        /**博客div 属性**/
        .main-menu-blog {

            width: 7%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }

        /**论坛div 属性**/
        .main-menu-talk {
            width: 7%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }

        /**问答div 属性**/
        .main-menu-ask {
            width: 7%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }

        /**资源div 属性**/
        .main-menu-resource {
            width: 7%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }

        /**文章div 属性**/
        .main-menu-word {
            width: 7%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;
        }

        /**vip会员div 属性**/
        .main-menu-vip {
            width: 10%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: 60px;

        }



        /**右边div**/


        /**登录div 属性**/
        .main-menu-login {
            width: 10%;
            height: 100%;
            float: right;
            text-align: center;
            line-height: 60px;
        }


        /**注册div 属性**/
        .main-menu-register {
            width: 10%;
            height: 100%;
            float: right;
            text-align: center;
            line-height: 60px;
        }

        .main-menu-search {
            width: 40%;
            height: 100%;
            float: right;
            text-align: center;
            line-height: 60px;
        }


        .main-menu-search-input {
            border: 1px solid gray;

            display: inline-block;

            box-sizing: border-box;

            width: 90%;

            height: 30px;

            padding-left: 10px;

            font-size: 14px;

            outline: none;

            color: #76838f;

            background: #F0F0F0;

            border-radius: 4px;

        }
    </style>
</head>

<body>
<div class="main-page-navigation-content">

    <div class="main-page-navigation">
        <div class="main-menu-left">
            <div class="main-menu-logo">
                <img style="margin-top: 5px" width="90px" height="40px" src="../img/yibo.png" />
            </div>

            <div class="main-menu-index">
                <span style="cursor: pointer;">首页</span>
            </div>

            <div class="main-menu-blog">
                <span style="cursor: pointer;">博客</span>
            </div>

            <div class="main-menu-talk">
                <span style="cursor: pointer;">论坛</span>
            </div>

            <div class="main-menu-ask">
                <span style="cursor: pointer;">问答</span>
            </div>

            <div class="main-menu-resource">
                <span style="cursor: pointer;">资源</span>
            </div>

            <div class="main-menu-word">
                <span style="cursor: pointer;">文章</span>
            </div>

            <div class="main-menu-vip">
                <span style="cursor: pointer;">vip会员</span>
            </div>

        </div>

        <div class="main-menu-right">
            <div class="main-menu-login">
                <span style="cursor: pointer;">登录</span>
            </div>

            <div class="main-menu-register">
                <span style="cursor: pointer;">注册</span>
            </div>

            <div class="main-menu-search">
                <input type="text" class="main-menu-search-input" placeholder="请输入搜索内容" />
            </div>

        </div>
    </div>
</div>
</body>

</html>